@import '~src/assets/styles/mixins.scss';
.detailContainer{
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.5);
    pointer-events: all;
    .header{
      cursor: move;
      height: 36px;
      line-height: 36px;
      display: flex;
      justify-content: space-between;
      background: $cf-primary;
      color: #fff;
      padding: 0 10px;
      .icon{
        @include close();
      }
    }
    .content{
      width: 100%;
       height: 384px;
      width: 350px;
      background: #fff;
       overflow-y: scroll;
      summary {
        user-select: none;
        outline: 0;
        padding: 10px;
        cursor: pointer;
      }
      [open] .item{
        display: block;
      }
      details ::-webkit-details-marker {
        color: gray;
        // display: none;
      }
    // details summary::after{
    //   content: "";
    //    position: absolute;
    //    width: 1em;
    //     height: 1em;
    //     margin:.2rem 0 0.5ch;
    //      background: url(svg.svg) no-repeat ;
    //      background-size: 100% 100%;
    //     transition: transform .2s;
    //   }
      [open] summary,
      summary:hover {
          background-color: #f5f1f1;
          box-shadow: inset 1px 0 #ddd, inset -1px 0 #ddd;
          max-height: 100px;
          font-weight: bold;
      }
      // details + div {
      //   // max-height: 0;
      //   transition: all .25s;
      //   // margin: 0 0 1rem;
      //   // overflow: hidden;
      //   overflow-y: scroll;
      // }
      // [open] + div{
      //   height: auto;
      //   //  max-height: 350px;
      // }
      .title{
        height: 30px;
        line-height: 30px;
        padding: 0 28px;
        background: #f1f1f1;
        font-size: 16px;
        font-weight: bold;
      }
      .item{
        padding: 6px 10px;
        border-bottom: 1px solid #efecec;
        margin: 0 20px;
        .name{
          font-weight: bold;
        }
      }
    }
    .nodata{
      height: 30px;
      text-align: center;
      padding: 10px 20px;
    }
  }
